import React, { useEffect, useState } from 'react'
import style from "./one.module.css";
import { logs } from "../../../../compoents/icons";
import { weiimg, summerimg } from "../../../../compoents/icons";
import { PlusCircleOutlined } from '@ant-design/icons';
// 一级tab图片页面
function One() {
  //是否显示左按钮
  const [leftflag, setLeftFlag] = useState(false)
  const [rightflag, setRightFlag] = useState(true)
  //样式
  const [contentStyle, setContentStyle] = useState({
    width: '1500px',
    height: "100%",
    display: "flex",
    position: "absolute",
    transition: "left 0.3s linear",
    top: '0',
    left: "0"
  })
  //向左
  const toright = () => {
    setContentStyle(pro => {
      return {
        ...pro,
        left: '0px'
      }
    })
    setLeftFlag(false)
    setRightFlag(true)
  }
  //向右
  const toleft = () => {
    setContentStyle(pro => {
      return {
        ...pro,
        left: '-220px'
      }
    })
    setLeftFlag(true)
    setRightFlag(false)
  }
  //
  //是否显示左按钮
  const [leftflag1, setLeftFlag1] = useState(false)
  const [rightflag1, setRightFlag1] = useState(true)
  const [bool, setBool] = useState(false)
  //向左移动的偏移量
  const [leftPosition, setLeftPosition] = useState(0);
  //样式
  const [contentStyle1, setContentStyle1] = useState({
    width: '3100px',
    height: "100%",
    display: "flex",
    position: "absolute",
    transition: "left 0.3s linear",
    top: '0',
    left: "0"
  })
  //向左
  const toright1 = () => {
    // 重置到最左边  
    setLeftPosition(prev => prev + 760);
    setBool(false)
    // setContentStyle1(pro => {
    //   return {
    //     ...pro,
    //     left: '0px'
    //   }
    // })
    // if (leftPosition <= -1500) {
    //   setRightFlag1(false)
    //   setLeftFlag1(true)
    // }
  }
  // console.log(leftPosition);
  //向右
  const toleft1 = () => {
    setLeftPosition(prev => prev - 760);
    setLeftFlag1(true)
    // if (leftPosition >= 0) {
    //   setRightFlag1(true)
    //   setLeftFlag1(false)
    // }
  }
  //
  useEffect(() => {
    setContentStyle1(pre => ({
      ...pre,
      left: `${leftPosition}px`
    }))
    if (leftPosition <= -1400) {
      setRightFlag1(false)
      setLeftFlag1(true)
      setTimeout(() => {
        setBool(true)
      }, 500);
    }
    else if (leftPosition >= 0) {
      setRightFlag1(true)
      setLeftFlag1(false)
    }
  }, [leftPosition])
  return (
    <div className={style.one}>
      <div className={style.log}>
        <ul style={{ ...contentStyle }}>
          {
            logs.map((item, index) => {
              return <li key={index} className={style.logimg}>
                <img src={item.img} alt="" className={style.logim} />
                <div className={style.logtitle1}>
                  {item.title}
                </div>
              </li>
            })
          }
        </ul>
        {
          leftflag ? <b className={style.zuo} onClick={toright}>&lt; </b> : ''
        }
        {
          rightflag ? <b className={style.you} onClick={toleft}> &gt;</b> : ''
        }
      </div>
      <div className={style.ban}>
        <h2>为你推荐</h2>
        <div className={style.container}>
          {
            weiimg.map((item, index) => {
              return <div key={index} className={style.tu}><img src={item.img} alt="" className={style.tuimg} /></div>
            })
          }
        </div>
        <button className={style.btn}>更多图片</button>
      </div>
      <div className={style.ban1}>
        <h2>夏天</h2>
        <div className={style.log1}>
          <ul style={{ ...contentStyle1 }}>
            {
              summerimg.map((item, index) => {
                return <li key={index} className={style.logimg1}>
                  <img src={item.img} alt="" className={style.logim1} />
                </li>
              })
            }
          </ul>
          {
            leftflag1 ? <i className={style.zuo1} onClick={toright1}>&lt; </i> : ''
          }
          {
            rightflag1 ? <i className={style.you1} onClick={toleft1}> &gt;</i> : ''
          }
          {
            bool ? <div className={style.icon}><PlusCircleOutlined /></div> : ''
          }
        </div>
      </div>
    </div>
  )
}

export default One
